import React from 'react';
import ReactPullLoad, { STATS } from "react-pullload";
import "../../../../node_modules/react-pullload/dist/ReactPullLoad.css";

export default class Index extends React.Component {
    constructor(props){
        super(props)
		this.state={
            name: props.match.params.name,
            data: [],
			hasMore: true,
			data:[],
			action: STATS.init,
			page: 1,
        }
    }
	componentDidMount(){
        document.title = '搜索结果'
        this.getList()
    }
	getList(){
		var req={
            page: 1,
			size: 12,
			name: this.state.name,
        }
        global.Ajax.hhtc_request("home/search_product",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    page: this.state.page,
                });
            }
		})
	}
	// 获取商品
	handleAction = action => {
		console.info(action, this.state.action, action === this.state.action);
		//new action must do not equel to old action
		if (action === this.state.action) {
		  	return false;
		}
		if (action === STATS.refreshing) {
		  	//刷新
		  	this.handRefreshing();
		} else if (action === STATS.loading) {
		  	//加载更多
		  	this.handLoadMore();
		} else {
		  	//DO NOT modify below code
		  	this.setState({
				action: action
		  	});
		}
	};	
	handRefreshing = () => {
		if (STATS.refreshing === this.state.action) {
		  	return false;
		}
        var req={
            page: 1,
			size: 12,
			name: this.state.name,
        }
        global.Ajax.hhtc_request("home/search_product",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    action: STATS.refreshed,
                    page: this.state.page,
                });
            }
		})
		this.setState({
		  	action: STATS.refreshing
		});
	};
	handLoadMore = () => {
		if (STATS.loading === this.state.action) {
		  	return false;
		}
		//无更多内容则不执行后面逻辑
		if (!this.state.hasMore) {
		  	return;
        }
        var req={
            page: this.state.page,
			size: 12,
			name: this.state.name,
        }
        global.Ajax.hhtc_request("home/search_product",req).then(data=>{
			if(data.code===1){
                if(data.data.length>0){
					this.setState({
                        data: this.state.data.concat(data.data.data),
                        action: STATS.reset,
                    });
				}else{
					this.setState({
                        action: STATS.reset,
                        hasMore: false
                    });
				}
            }
		})
		this.setState({
		  	action: STATS.loading
		});
	};
	render(){
		return(
			<div className=''>
                <p style={{lineHeight: '44px',textAlign: 'center',fontSize: 18,}}>搜索“{this.state.name}”的结果</p>
                <ReactPullLoad
					downEnough={100}
					action={this.state.action}
					handleAction={this.handleAction}
					hasMore={this.state.hasMore}
					distanceBottom={100}
				>
					<div className='index_lj_list'>
						{this.state.data.map((item,index)=>{
							return(
								<div key={'list'+index} className='item' onClick={()=>{this.props.history.push('/page/home/learn/learndetail/'+item.id)}}>
									<div className='picbox'>
										<img alt='' src={item.img} className='pic' />
										<p className='bq1'>{item.type===1?'视频':'听书'}</p>
									</div>
									<div className='right'>
										<p className='title'>{item.title}</p>
										<p className='desc'>{item.info}</p>
										<p className='peop'>{item.author}</p>
										<div className='flex'>
											<p className='pri'>{item.z_price*1000/1000}</p>
											{item.is_jiang===1&&<p className='bq'>分享有奖</p>}
											<p className='play_btn'>
												<img alt='' src={require('../../imgs/sanj.png')} className='sanj' />
												<span>试学</span>
											</p>
										</div>
									</div>
								</div>
							)
						})}
					</div>
				</ReactPullLoad>
                {/* <div className='index_lj_list'>
                    {this.state.data.map((item,index)=>{
                        return(
                            <div className='item' key={'lj'+index} onClick={()=>{this.props.history.push('/page/home/learn/learndetail/'+item.id)}}>
                                <div className='picbox'>
                                    <img alt='' src={item.img} className='pic' />
                                    <p className='bq1'>{item.type===1?'视频':'听书'}</p>
                                </div>
                                <div className='right'>
                                    <p className='title'>{item.title}</p>
                                    <p className='desc'>{item.info}</p>
                                    <p className='peop'>{item.author}</p>
                                    <div className='flex'>
                                        <p className='pri'>￥{item.z_price*1000/1000}</p>
                                        {item.is_jiang===1&&<p className='bq'>分享有奖</p>}
                                        <p className='play_btn'>
                                            <img alt='' src={require('../../imgs/sanj.png')} className='sanj' />
                                            <span>试学</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div> */}
                
			</div>
		)
	}
}
